import { $ } from './library/jquery.js';

$(function () {
    // 登录注册切换
    $('.select-header>span').first().on('click', function () {
        $(this).addClass('select-active').siblings().removeClass('select-active');
        $('.move-active').animate({
            left: 0
        }, 200);
        $('.select-login').removeClass('hide');
        $('.select-reg').addClass('hide');
        $('.active-inputbox').removeClass('withoutval-bgc').parent().next('p').addClass('hide');
        $('.input-info').removeClass('withoutval-txt');
    });

    $('.select-header>span').last().on('click', function () {
        $(this).addClass('select-active').siblings().removeClass('select-active');
        $('.move-active').animate({
            left: 59
        }, 200);
        $('.select-reg').removeClass('hide');
        $('.select-login').addClass('hide');
        $('.active-inputbox').removeClass('withoutval-bgc').parent().next('p').addClass('hide');
        $('.input-info').removeClass('withoutval-txt');
    });

    // 下拉菜单
    $('.sr-country').on('click', function (ev) {
        if (!$('.list-active').eq(0).hasClass('hide')) {
            $('.list-active').eq(0).addClass('hide');
        } else {
            $('.list-active').eq(0).removeClass('hide');
        }
        ev.stopPropagation();
    });

    $('.list-search').parent().click(function (ev) {
        ev.stopPropagation();
    });

    $('.sr-phone-left').on('click', function (ev) {
        if (!$('.list-active').eq(1).hasClass('hide')) {
            $('.list-active').eq(1).addClass('hide');
        } else {
            $('.list-active').eq(1).removeClass('hide');
        }
        ev.stopPropagation();
    });


    $('body').on('click', function () {
        $('.list-active').addClass('hide');
    });

    //点击li切换内容
    $('.country-list>li').click(function (ev) {
        $('.sr-country>div').html($(this).html());
        $('.list-active').eq(0).addClass('hide');
        ev.stopPropagation();
    });

    $('.phone-list>li').click(function (ev) {
        $('.sr-phone-left>div').html($(this).html());
        $('.list-active').eq(1).addClass('hide');
        ev.stopPropagation();
    });


    // input激活和空白时特效

    $('.active-inputbox').each(i => {
        $('.active-inputbox').eq(i).on('focus', function () {
            $(this).addClass('input-active');
            $('.input-info').eq(i).animate({
                fontSize: 12,
                top: 8
            }, 200);
        });
        $('.input-info').eq(i).on('click', function () {
            $('.active-inputbox').eq(i).trigger('focus');
        });
        $('.active-inputbox').eq(i).on('blur', function () {
            $(this).removeClass('input-active');
            if (!$(this).val()) {
                $(this).addClass('withoutval-bgc');
                $('.input-info').eq(i).addClass('withoutval-txt');
                $('.input-info').eq(i).animate({
                    fontSize: 17,
                    top: 18
                }, 200);
                $(this).parent().next('p').removeClass('hide');
            } else {
                $(this).removeClass('withoutval-bgc').parent().next('p').addClass('hide');
                $('.input-info').eq(i).removeClass('withoutval-txt');
            }
        });
        if ($('.active-inputbox').eq(i).val()) {
            $('.active-inputbox').eq(i).prev().css({
                fontSize: 12,
                top: 8
            });
        };
    });


    $('.gotoreg').click(function () {
        location.href = 'reg.html';
    });

})